<template>
  <div class="scan-code-detail-page">
    <group>
      <cell title="基本信息" value=""></cell>
      <cell-form-preview :list="list"></cell-form-preview>
    </group>
    <group v-if="peiyangList.length">
      <cell title="关注宝宝哪方面能力培养" value=""></cell>
      <cell-form-preview :list="peiyangList"></cell-form-preview>
    </group>
    <group v-if="tiyanList.length">
      <cell title="体验课程" value=""></cell>
      <cell-form-preview :list="tiyanList"></cell-form-preview>
    </group>
    <group>
      <cell title="消息来源" v-if="wherefrom" :value="wherefrom || '无'"></cell>
      <cell title="校区" :value="region || '无'"></cell>
      <cell title="学校名称" :value="xiaoquming || '无'"></cell>
    </group>
    <a class="scrm-default-btn code-call-btn" :href="'tel:' +mobile ">拨打家长电话</a>
  </div>
</template>
<script>
  // import { Group, Cell, CellFormPreview } from 'vux'
  import Group from 'vux/src/components/group'
  import Cell from 'vux/src/components/cell'
  import CellFormPreview from 'vux/src/components/cell-form-preview'
  import { mapActions } from 'vuex'

  export default {
    data () {
      return {
        list: [],
        peiyangList: [],
        tiyanList: [],
        wherefrom: '无',
        region: '无',
        mobile: '无',
        babyinfo: {
          campus: 'gz',
          lessons: {
            values: [ 1 ],
            isSingle: true,
            options: [
              {
                title: '亲子课程（2-24个月）',
                selected: true,
                value: 1,
                label: 'zong_he_xiao'
              },
              {
                title: '特色课程（20个月以上）',
                selected: false,
                value: 2,
                label: 'zong_he_xiao'
              },
              {
                title: '卓越课程（全职妈妈首选）',
                selected: false,
                value: 3,
                label: 'zong_he_xiao'
              },
              {
                title: '托班课程（职场妈妈首选）',
                selected: false,
                value: 5
              }
            ]
          },
          campuses: {},
          peiyang: {
            values: ['yundongnengli'],
            isSingle: false,
            options: [
              {
                title: '运动能力',
                selected: true,
                value: 'yundongnengli'
              },
              {
                title: '玩得开心',
                selected: false,
                value: 'wandekaixin'
              },
              {
                title: '独立自理',
                selected: false,
                value: 'dulizili'
              },
              {
                title: '语言表达',
                selected: false,
                value: 'yuyanbiaoda'
              },
              {
                title: '人际互动',
                selected: false,
                value: 'renjihudong'
              }
            ]
          },
          wherefrom: {
            values: ['intnet'],
            isSingle: true,
            options: [
              {
                title: '网络搜索',
                selected: true,
                value: 'intnet'
              },
              {
                title: '朋友介绍',
                selected: false,
                value: 'friend'
              },
              {
                title: '大众点评/美团',
                selected: false,
                value: 'meida'
              },
              {
                title: '妈妈网',
                selected: false,
                value: 'mamawang'
              },
              {
                title: '线上讲座',
                selected: false,
                value: 'online_class'
              },
              {
                title: '其他',
                selected: false,
                value: 'other'
              }
            ]
          },
          address: '广州市天河区五山街道富力盈通大厦',
          baby_name: '',
          birthday: '',
          baby_relation: '',
          mobile_num: '',
          experience_time: ''
        }
      }
    },
    components: {
      CellFormPreview,
      Group,
      Cell
    },
    mounted () {
      const clueId = this.$route.query.clue_id
      this.getScanCodeDetail(clueId).then((response) => {
        const data = response.data.results
        if (response.data.errcode === 0) {
          const baby = data.baby
          let list = [
            {
              label: '生日',
              value: baby.birthday
            },
            {
              label: '关系',
              value: baby.guanxi
            },
            {
              label: '手机',
              value: baby.mobile
            },
            {
              label: '名称',
              value: baby.name
            }
          ]

          if (baby.tiyanshijian) {
            list.push({
              label: '体验时间',
              value: baby.tiyanshijian
            })
          }

          this.list = list
          this.peiyangList = this.getPeiyang(data.peiyang)
          this.tiyanList = this.getTiyan(data.tiyankecheng)
          this.wherefrom = this.getWhereFrom(data.wherefrom)
          this.region = {'gz': '广州', 'sz': '深圳'}[data.xiaoquchengshi]
          this.xiaoquming = data.xiaoquming
          this.mobile = baby.mobile
        }
        console.log(response)
      })
    },
    methods: {
      getPeiyang (peiyangList) {
        const peiyangOptions = this.babyinfo.peiyang.options
        let list = []
        if (peiyangList && typeof peiyangList.forEach === 'function') {
          peiyangList.forEach((value, index) => {
            peiyangOptions.forEach((elem, oindex) => {
              if (elem.value === value) {
                console.log(elem.value, value, elem.title)
                list.push({label: '培养', value: elem.title})
              }
            })
          })
        }
        return list
      },
      getTiyan (dataList) {
        console.log(dataList, 'tiyan')
        const dataOptions = this.babyinfo.lessons.options
        let list = []
        if (typeof dataList.forEach === 'function') {
          dataList.forEach((value, index) => {
            dataOptions.forEach((elem, oindex) => {
              if (elem.value === value) {
                console.log(elem.value, value, elem.title)
                list.push({label: '体验', value: elem.title})
              }
            })
          })
        } else {
          dataOptions.forEach((elem, oindex) => {
            if (elem.value === dataList) {
              console.log(elem.value, dataList, elem.title)
              list.push({label: '体验', value: elem.title})
            }
          })
        }
        return list
      },
      getWhereFrom (value) {
        const dataOptions = this.babyinfo.wherefrom.options
        console.log(dataOptions, value)
        let wherefrom = ''
        dataOptions.forEach((elem, oindex) => {
          if (elem.value === value) {
            wherefrom = elem.title
          }
        })
        return wherefrom
      },
      ...mapActions({
        getScanCodeDetail: 'getScanCodeDetail'
      })
    }
  }
</script>
<style lang="less">
  @import "../less/base.less";
  .scan-code-detail-page {

    .code-call-btn {
      margin: 20px auto;
    }

  }
</style>
